<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <th:block th:include="/pc/include :: header('公告详情')"/>
    <link th:href="@{/pc/css/details.css}" rel="stylesheet"/>
    <link th:href="@{/pc/css/index.css}" rel="stylesheet"/>
</head>
<body>
<div id="top">
    <div class="top_1">
        <div class="top_1-2">
            <ul>
                <li class="n1">
                    <span th:if="!${session.userInfo}">
                        <a href="/login?isPc=pc">登录</a>
                    </span>
                    <span th:if="${session.userInfo}" style="color: #FB6302">
                        <img th:src="(${#strings.isEmpty(session.userInfo.avatar)}) ? @{/img/profile.jpg} : @{${session.userInfo.avatar}}"
                             class="img-circle"
                             style="width: 25px;height: 25px"
                             alt="User Image">&nbsp;&nbsp;[[${session.userInfo.userName}]]
                    </span>
                </li>
                <li class="n1">
                    <span>
                        <a href="/pc/index">首页</a>
                    </span>
                </li>
                <li class="n1">
                    <span th:if="!${session.userInfo}">
                        <a href="/login?isPc=pc">登录</a>
                    </span>
                </li>
                <li class="n1">
                    <span th:if="${session.userInfo}">
                        <a href="/pc/car">购物车</a>
                    </span>
                </li>
                <li class="n1">
                    <span th:if="${session.userInfo}">
                        <a href="/pc/center">个人中心</a>
                    </span>
                </li>
                <li class="n1">
                    <a th:if="${session.userInfo}" href="/logout">
                        <i class="fa fa-sign-out"></i> 退出登录</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div style="text-align: center;margin-top: 43px;">
    <h3 style="font-size: 23px;">[[${gongGao.title}]] </h3>
</div>
<div id="img-head">
    <div class="cankao">
        <h1 style="font-size: 16px;">内容</h1>
    </div>
    <div style="margin: 0 334px;" th:utext="${gongGao.content}"></div>
</div>
<div style="height: 50px;background-color: #F5F5F5;"></div>

<th:block th:include="include :: footer"/>
<script th:inline="javascript">


    var lunbos = document.querySelectorAll("#lunbo li");
    for (var i = 0; i < lunbos.length; i++) {
        lunbos[i].setAttribute("index", i);
        lunbos[i].addEventListener("click", function () {
            var chang = document.getElementById("chang");
            var a = this.getAttribute("index");
            var left = parseFloat(document.defaultView.getComputedStyle(chang, null).left);
            if (a == 0) {
                if (left == -3678) {
                    chang.style.animation = "myfirst2 1s";
                    chang.style.left = 0 + "px";
                } else if (left == -2452) {
                    chang.style.animation = "myfirst1 1s";
                    chang.style.left = 0 + "px";
                } else {
                    chang.style.animation = "myfirst 1s";
                    chang.style.left = 0 + "px";
                }
            }
            if (a == 1) {
                if (left == 0) {
                    chang.style.animation = "myfirst3 1s";
                    chang.style.left = -1226 + "px";
                } else if (left == -2452) {
                    chang.style.animation = "myfirst8 1s";
                    chang.style.left = -1226 + "px";
                } else {
                    chang.style.animation = "myfirst9 1s";
                    chang.style.left = -1226 + "px";
                }
            }
            if (a == 2) {
                if (left == 0) {
                    chang.style.animation = "myfirst4 1s";
                    chang.style.left = -2452 + "px";
                } else if (left == -1226) {
                    chang.style.animation = "myfirst6 1s";
                    chang.style.left = -2452 + "px";
                } else {
                    chang.style.animation = "myfirst11 1s";
                    chang.style.left = -2452 + "px";
                }
            }
            if (a == 3) {
                if (left == 0) {
                    chang.style.animation = "myfirst5 1s";
                    chang.style.left = -3678 + "px";
                } else if (left == -1226) {
                    chang.style.animation = "myfirst7 1s";
                    chang.style.left = -3678 + "px";
                } else {
                    chang.style.animation = "myfirst10 1s";
                    chang.style.left = -3678 + "px";
                }
            }
            var ul = this.parentNode;
            var ls = ul.children;
            for (var i = 0; i < ls.length; i++) {
                ls[i].removeAttribute("class");
            }
            this.className = "active7";
        });
    }


</script>
</body>

</html>
